Beginners introduction
Creating the first project Multi Language Hello World This is the first new project in the learning to use Qt Creator therefore there will be detailed descriptions of commands during the building of this project. The use of the “->” will indicate to select the next option from the menu specified on the right of the “->”. This project will extend the normal “Hello World!” to allow selection of languages other than English to send the country equivalent. You will be easily able to modify this for your country language. The new Qt Creator project is created by (File -> New File or Project). ' Display will appear and double click on the “'Mobile Qt Application”. 'The next screen will request your Project name, which must not contain white space characters. The name chosen for this project is “''mlHelloWorld”. In this project is created in your username home profile. The next screen asks to tick the selected targets for the project. For ease of use we click all the targets so that we can build and deploy to all platforms if needed. When “next” has been clicked another screen appears which asks for the name of the class name. The default to this is “MainWindow” replace this with the name “main”, the case is important. This will create the basic files we will be using. On clicking next a summary screen will appear the last filename being “''mlHelloWorld.pro''”. This is the control file and this will be updated later, click “Finish” to create the project. Setting up the first GUI mobile application screen size * The mobile phone will be a Nokia N95 with display of 240 x 320. In the "Property Editor" double click the "'''geometry" tab to open up Width and Height set "width" to 240 and “height” 300. * Move down and click "maximumSize" tab to open up Width and Height set "width" to 240 and “height” 300. * Save the layout (File -> Save All) Creating the “Exit” Button * From the left column window select the Buttons pane. Click and drag the "Push Button" onto the form at bottom right. * Double click on the push button change the name to “Exit”, press enter when finished typing. * Look in the Property editor. Select QObject -> 'objectName' '''from "pushButton" change this to "pushButton_exit" * Click the “Signals and Slots Editor” tab in the bottom pane window. * Click the “+” sign to add a new “Signal and Slot” entry * Double click on the and select '''pushButton_exit * '''Double click on the and select clicked()' * Double click on the and select '''mlHelloWorld' * Double click on the and select close () See picture below If you want save and run this just to see the Exit command work (File -> Save All) then (Tools -> Build All). To Run (Tools -> Run) Is this a good idea or should we go on discuss? ____________________________________________________________ Creating the "Hello World" multiple language combo box To continue, we need to add some more object items from the left panel to achieve the to be able to have "Hello World" in multiple languages which can be selected. So lets click and drag "Combo Box" from "Input Widgets" pane to the main form around the middle. Change the 'objectName' as "comboBox_mlhw" Double click on the Combo box an edit Combo box pops up. Click "+" to enter the text "English Hello World". Now open up a new browser and go to Google on the top near the search entry box and click Language tools. In the text box put "Hello World" and Select the English to French language. Click "translate" and you will get "Bonjour tout le monde" Copy this into the paste buffer. Back on the comboBox double click and click "+". Paste the French text copied from Google "French Bonjour tout le monde". Now you can carry on doing this for any languages. China/Japan will not show on the phone if you have only European Languages on your phone. Creating the “Display in selected language” Button *From the left column window select the Buttons pane. Click and drag the "Push Button" onto the form at bottom right. *Double click on the push button change the name to “'Display in selected language'”, press enter when finished typing. *Look in the Property editor. Select QObject -> 'objectName' 'from "pushButton" change this to "pushButton_hello". Creating the "Hello World" multiple language output box From the left column window select the Input Widgets pane. Click and drag the "textEdit" onto the form at bottom above Exit button enlarge from left to right. Select QObject -> 'objectName' from "textEdit" change this to "textEdit_message". ____________________________________________________________ Creating the function to display the selected language in the output box Click on the “Qt Welcome” pane Edit and click on the file “mlHelloWorld.h” Add the lines 5,17 and 18 1 #ifndef MLHELLOWORLD_H 2 #define MLHELLOWORLD_H 3 #include '''4 // add the generated ui description file ' '5 #include "ui_mlhelloworld.h" ' 6 namespace Ui { 7 class mlHelloWorld; 8 } 10 class mlHelloWorld : public QMainWindow 11 { 12 Q_OBJECT 13 public: 14 explicit mlHelloWorld(QWidget *parent = 0); 15 ~mlHelloWorld(); 16 // add the slot connection from signal pushButton_hello '''17 public slots: 18 void helloMessage(); 19 private: 20 Ui::mlHelloWorld *ui; 21 }; 22 #endif // MLHELLOWORLD_H The second way to create a “Signal to Slot” connection is by using code. This is probably the most used method. To temporarily leave Design mode Click on the “Qt Welcome” pane Edit and click on the file “mlHelloWorld.cpp”. Read and add the lines 10,11 and 13 to 17 1 #include "mlhelloworld.h" 2 mlHelloWorld::mlHelloWorld(QWidget *parent) : 3 MainWindow(parent), 4 ui(new Ui::mlHelloWorld) 5 { 6 ui->setupUi(this); 7 // add the connection between the signal and the slot 8 // signal: pushButton_hello and ''' '''9 // slot: helloMessage() defined in '''mlhelloworld.h '''10 connect( ui->pushButton_hello,SIGNAL( clicked()), 11 this, SLOT( helloMessage()) ); 12 } 13 void mlHelloWorld::helloMessage() 14 { 15 // Display Hello World in selected language; 16 ui->textEdit_message->append(ui->comboBox_mlhw->currentText()); 17 } 18 mlHelloWorld::~mlHelloWorld() 19 { 20 delete ui; 21 } Compiling and running on the simulator All the changes need saving and running easily ((File -> Save All) then (Tools -> Build All). Click the green triangle on the left to “Run”. In the Simulator the Symbian non-touch phone has been selected this is an N97 8GB and was originally the program this was written on. To make this application work on the other phones you may need to change the size of the screen set up at the beginning of the Chapter. Summary This has been a very detailed description sometimes mouse click described to use the IDE. Lets look at what concepts have been covered. Mobile phones have a GUI screen they do not have a console so there is no place for printf(“Hello World”);. This chapter has shown how easy the replacement is to use. Would you provide multi-language support in your application? Almost every client asks this question. This article describes step-by-step explanation to create multi-language application in Qt for mobile phone development. The article follows coding standards and organized in well manners, which helps even beginners to develop multi-Language application. Those who want to test multi-Language application can simply enter the extra code example given in article and build it. Mobile phone applications need to have multiple language support if you are going sell them on the worldwide Ovi app store. This chapter has shown an easy way to support multiple languages, while at the same introducing both ways of using the important concept of “Signals and Slots”. The skills you have learnt in this chapter will be the building blocks of future chapters. The partial screen of the French version having been run on the N97 Qt Mobile phone simulator